<template>
	
  <view class="login-container"><h2>注册</h2>
    <!-- 注册表单 -->
    <view class="register-form" style="margin-top:0">
      <view class="input-group">
        <text style="color:white;font-size: 22px;">用户名：</text>
        <input type="text" v-model="username" @blur="validateUsername" placeholder="请输入用户名" />
        <text v-if="usernameError" style="color: red;">{{ usernameError }}</text>
      </view>
      <view class="input-group">
        <text style="color:white;font-size: 22px;">昵称：</text>
        <input type="text" v-model="nickname" placeholder="请输入昵称" />
      </view>
      <view class="input-group">
        <text style="color:white;font-size: 22px;">密码：</text>
        <input type="password" v-model="password" @blur="validatePassword" placeholder="请输入密码" />
        <text v-if="passwordError" style="color: red;">{{ passwordError }}</text>
      </view>
	  
      <view class="input-group">
        <text style="color:white;font-size: 22px;">邮箱：</text>
        <input type="text" v-model="email" @blur="validateEmail" placeholder="请输入邮箱" />
        <text v-if="emailError" style="color: red;">{{ emailError }}</text>
      </view>
	  <view class="input-group">
        <text style="color:white;font-size: 22px;">邮箱验证码：</text>
	                     
        <input type="password" v-model="ePassword"  placeholder="请输入邮箱验证码" />
	     <button id="sendCheckCode" type="button" @click="sendCode" class="layui-btn layui-btn-normal">获取验证码</button>
	     <text v-if="ePasswordError" style="color: red;">{{ ePasswordError }}</text>
	  </view>
      <button @click="register">确认注册</button>
    </view>
  </view>
</template>

<script>
import axios from 'axios';
	import service from '../../utils/request.js';
export default {
  data() {
    return {
	  ReCode:'',
      email: '',
      username: '',
	  ePassword:'',
      password: '',
      nickname: '',
      usernameError: '',
      passwordError: '',
      emailError: '',
	  ePasswordError:''
    };
  },
  methods: {
	  async sendCode() {
	      console.log(this.email)
	      const response = await service.get('/user/sendCode?email='+this.email);
	      console.log('获取的数据:', response);
		  this.ReCode=response;
	  },
	   resetForm() {
	        this.email = '';
	        this.username = '';
	        this.password = '';
	        this.nickname = '';
	        this.usernameError = '';
	        this.passwordError = '';
	        this.emailError = '';
	      },
    validateUsername() {
      if (this.username.length < 5 || this.username.length > 8) {
        this.usernameError = '用户名长度应为5~8个字符';
      } else {
        this.usernameError = '';
      }
    },
    validatePassword() {
      if (this.password.length < 5 || this.password.length > 8) {
        this.passwordError = '密码长度应为5~8个字符';
      } else {
        this.passwordError = '';
      }
    },
    validateEmail() {
      const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailPattern.test(this.email)) {
        this.emailError = '邮箱格式不正确';
      } else {
        this.emailError = '';
      }
    },
    async register() {
      this.validateUsername();
      this.validatePassword();
      this.validateEmail();
      
      if (this.usernameError || this.passwordError || this.emailError) {
        console.error('表单验证失败');
        return;
      }
      if(this.ReCode==this.ePassword){
		  this.emailError = '';
      try {
        console.log('发送的数据:', { nickname: this.nickname, username: this.username, password: this.password, email: this.email });
        const response = await service.post('/user/register', {
          username: this.username,
          password: this.password,
          nickname: this.nickname,
          email: this.email
        });
        console.log('获取的数据:', response);
		if (response.code === 1) {
		  // 调用 uni.showModal 来显示弹窗
		  uni.showModal({
		    title: '提示',
		    content:  '邮箱已被注册，请使用其他邮箱或找回密码',
		    showCancel: false, // 可以设置是否显示取消按钮
		    success: function (res) {
		      if (res.confirm) {
		        console.log('用户点击确定');
		        // 这里可以放置用户点击确定后的逻辑
		      }
		    }
		  });
		}
		this.resetForm();
        uni.navigateTo({
          url: '/subpages/login/login'
        });
      } catch (error) {
        console.error('获取数据失败:', error);
      }
	  }
	  else{
		  this.emailError = '验证码不正确';
	  }
    }
  }
};
</script>

<style>
body {
  font-family: 'Open+Sans', sans-serif;
}

.login-container {
  /* 使用更丰富的渐变色 */
  background: linear-gradient(to bottom right, #ffd427,#ffff7f );
  padding: 40px; /* 增加内边距 */
   background: url('C:\Users\86135\Desktop\宠物商城\pets-market\PetsMarket\static\images\pet\background.jpg') no-repeat center center;
    background-size: cover; /* 背景图片覆盖整个元素 */
    z-index: -1; /* 确保背景图片位于内容下方 */
}

h2 {
  color: #fff; /* 更清晰的标题颜色 */
  margin-bottom: 20px;
}

.input-group {
  margin-bottom: 15px; /* 调整间距 */
  position: relative; /* 为图标留出空间 */
}

.input-group text {
  color: #fff; /* 文字颜色 */
  font-size: 18px; /* 调整字体大小 */
}

input {
  width: 90%; /* 占满父容器宽度 */
  margin-top: 5px; /* 与标签的间距 */
  padding: 15px; /* 增加内边距 */
  border: 1px solid #ccc;
  border-radius: 8px; /* 圆角 */
  transition: box-shadow 0.3s, border-color 0.3s; /* 过渡效果 */
}

input:focus {
  outline: none;
  border-color: #007bff; /* 聚焦时的边框颜色 */
  box-shadow: 0 0 8px rgba(0, 123, 255, 0.2); /* 聚焦时的阴影 */
}

button {
  width: 100%; /* 按钮宽度占满 */
  margin-top: 30px; /* 与上一个元素的间距 */
  border-radius: 8px; /* 圆角 */
  transition: transform 0.3s, box-shadow 0.3s; /* 过渡效果 */
}

button:hover {
  transform: translateY(-2px); /* 鼠标悬浮时上移 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* 鼠标悬浮时的阴影 */
}

/* 添加一些动画效果，比如shake，当输入错误时 */
@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
  20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.input-group.invalid input {
  animation: shake 0.5s;
}

/* 错误信息样式 */
.text-error {
  color: red;
  font-size: 14px;
  margin-top: 5px;
}
</style>